<template>
  <div class="container">
    <span class="headline"><i>热</i>&nbsp;门推荐</span>

    <div class="img">
      <el-row :gutter="20">

        <el-col :span="8" :offset="4" class="col">
          <a href="">
            <figure class="mc-item mc-item--slideInUp-zoomIn">
              <img class="mc-item__image" src="../assets/image/adventure.jpg" alt="...">
              <figcaption class="mc-item__caption mc">
                  <div>
                    <el-row :gutter="10">
                      <el-col :span="2" :offset="2">
                        <el-avatar :size="35" :src="require('../assets/image/wuyan.jpeg')"></el-avatar>
                      </el-col>
                      <el-col :span="10" class="item">
                        <p>有趣的事分享给有趣的人</p>
                      </el-col>
                    </el-row>
                  </div>
              </figcaption>
            </figure>
          </a>
          
        </el-col>

        <el-col :span="8" class="col">
          <figure class="mc-item mc-item--slideInUp-zoomIn">
              <img class="mc-item__image" src="../assets/image/adventure.jpg" alt="...">
              <figcaption class="mc-item__caption mc">
                  <p>有趣的事分享给有趣的人</p>
              </figcaption>
          </figure>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8" :offset="4" class="col">
          <figure class="mc-item mc-item--slideInUp-zoomIn">
              <img class="mc-item__image" src="../assets/image/adventure.jpg" alt="...">
              <figcaption class="mc-item__caption mc">
                  <p>有趣的事分享给有趣的人</p>
              </figcaption>
          </figure>
        </el-col>

        <el-col :span="8" class="col">
          <figure class="mc-item mc-item--slideInUp-zoomIn">
              <img class="mc-item__image" src="../assets/image/adventure.jpg" alt="...">
              <figcaption class="mc-item__caption mc">
                  <p>有趣的事分享给有趣的人</p>
              </figcaption>
          </figure>
        </el-col>

      </el-row>
    </div>


  </div>
</template>

<script>
export default {
    name:"Recommd"
}
</script>

<style scoped>
  @import "../assets/CSS/mocassin.css";
  /* 头部容器 */
  .container {
    width:85vw;
    min-height:80vh;
    background-color:#F0F0F0;
    margin:0 auto;
  }
  .headline{
    display:inline-block;
    font-size:1.625rem;
    font-weight: 800;
    margin: 1.25rem 0 1.875rem 5rem;
    border-bottom: 3px solid rgb(173,223,162);
  }
  i{
    font-size:2.5rem;
  }

  /* 图片展示区 */
  img{
    width: 100%;
  }
  .col {
    margin-bottom: 1.25rem;
  }

  /* 图片功能区 */
  .mc{
    text-decoration: none;
    color:white;
    background-color:rgb(175, 175, 175);
  }
  .item{
    margin-top:.875rem;
  }
  .el-avatar{
    margin-top:.3125rem;
  }
</style>